import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './base.scss';
import $ from 'jquery';

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      fname:''
    }
  }
  componentDidMount () {
    let uidt = JSON.parse(localStorage.getItem('uid'))
    if (uidt == null) {
      $(".Login").css("display","none")
      $(".NoLogin").css("display","block")
      $(".Rightsidebar_NoLogin").css("display","block")
      $(".Rightsidebar_LoginTop").css("display","none")
      $(".sectionNoLogin").css("display","block")
      $(".sectionLogin").css("display","none")
    } else {
      $(".NoLogin").css("display","none")
      $(".Login").css("display","block")
      $(".Rightsidebar_NoLogin").css("display","none")
      $(".Rightsidebar_LoginTop").css("display","block")
      $(".sectionNoLogin").css("display","none")
      $(".sectionLogin").css("display","block")
    }

    let fname = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      fname:fname
    })
  }
  // 退出操作
  out () {
    localStorage.removeItem('uid');
  }
  list1 () {
    let family = this.refs.family.innerHTML
    localStorage.setItem('f_name', JSON.stringify(family))
    this.props.history.push('/fkind/navv')
  }
  list2 () {
    let kuai = this.refs.kuai.innerHTML
    localStorage.setItem('f_name', JSON.stringify(kuai))
    this.props.history.push('/fkind/navv')
  }
  list3 () {
    let xia = this.refs.xia.innerHTML
    localStorage.setItem('f_name', JSON.stringify(xia))
    this.props.history.push('/fkind/navv')
  }
  list4 () {
    let f_name = this.refs.tang.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/navv')
  }
  list9 () {
    let f_name = this.refs.tudou.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/navv')
  }
  list11 () {
    let f_name = this.refs.jidan.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/navv')
  }
  list16 () {
    let f_name = this.refs.jitui.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/meat')
  }
  list15 () {
    let f_name = this.refs.yangtui.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/navv')
  }
  lis1 () {
    let f_name = this.refs.zhu.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/meat')
  }
  lis2 () {
    let f_name = this.refs.zao.innerHTML
    localStorage.setItem('f_name', JSON.stringify(f_name))
    this.props.history.push('/fkind/navv')
  }

  seach () {
    alert("该功能暂未开发")
  }

  goWork() {
    let uidt = JSON.parse(localStorage.getItem('uid'))
    if (uidt == null) {
      this.props.history.push('/works/lastUpload')
    } else {
      this.props.history.push('/works/update')
    }
  }

  render () {
    return (
      <nav className = "headerNav"> 
        <Link to ="/" ><div className="logo"></div></Link>
        <div className="searchBox">
          <form action="" method="get">
            <span className="inp">
              <input type="text" maxLength="60" size="12" placeholder="搜索菜谱、食材" name="q" autoComplete="off" />
            </span>
            <span className="bn">
              <input type="button" value="搜菜谱" onClick={ this.seach.bind(this)} />
            </span>
          </form>
        </div>
        <div className="nav">
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <Link to="/kind">菜谱分类</Link>
              <div className="kind_list">
                <ul>
                  <li className="topbar-cat-head">常见主题</li>
                  <li onClick={this.list1.bind(this)} ref="family">家常菜</li>
                  <li onClick={this.list2.bind(this)} ref="kuai">快手菜</li>
                  <li onClick={this.list3.bind(this)} ref="xia">下饭菜</li>
                  <li onClick={this.lis2.bind(this)} ref="zao">早餐</li>
                  <li>减肥</li>
                  <li  onClick={this.list4.bind(this)} ref="tang">汤羹</li>
                  <li>烘焙</li>
                  <li>小吃</li>
                </ul>
                <ul>
                  <li className="topbar-cat-head">常见食材</li>
                  <li onClick={this.lis1.bind(this)} ref="zhu">猪肉</li>
                    <li onClick={this.list16.bind(this)} ref="jitui">鸡肉</li>
                    <li>鱼</li>
                    <li onClick={this.list11.bind(this)} ref="jidan">鸡蛋</li>
                    <li onClick={this.list9.bind(this)} ref="tudou">土豆</li>
                </ul>
                <ul>
                  <li className="topbar-cat-head">时令食材</li>
                  <li>金桔</li>
                    <li  onClick={this.list15.bind(this)} ref="yangtui">羊排</li>
                    <li>柚子</li>
                    <li>萝卜</li>
                    <li>椰子</li>
                </ul>
                <p>查看全部分类</p>
              </div>
            </li>
            <li>
              <Link to="/menu">菜单</Link>
            </li>
            <li onClick={this.goWork.bind(this)}>
              <Link to="">作品动态</Link>
            </li>
          </ul> 
        </div> 
        <div className="user">
            <ul className="NoLogin">
              <li>
                <Link to="/login">登录</Link>
              </li>
              <li>
                <Link to="/register">注册</Link>
              </li>
            </ul>
            <ul className="Login">
              <li>
                <Link to="/mine">
                  <i className="iconfont icon-wode"></i>
                </Link>
                <ul className="mine_list">
                    <li>
                      <Link to="/mine/cook">我的厨房</Link>
                    </li>
                    <li>
                      <Link to="/mine/set">账号设置</Link>
                    </li>
                    <li>
                      <Link to="/mine/find">发现好友</Link>
                    </li>
                    <li onClick={ this.out.bind(this) }>
                     <Link to="/login">退出</Link>
                    </li>
                  </ul>
              </li>
              <li>
                <Link to="/mine/collection"><i className="iconfont icon-weibiaoti2fuzhi03"></i></Link>
              </li>
            </ul>
          </div>
      </nav>
    )
  }
}

export default Com;
